<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试富文本</title>
</head>
<body>
<div class="edit" id="edit" style="width: 350px;height: 120px;border: 1px solid red;margin: 0 auto">bala</div>
<div style="width: 355px;margin: 0 auto">
<button data-name="justifyCenter">居中</button>
<button data-name="selectALL">全选</button>
<button data-name="copy">复制</button>
<button data-name="paste">粘贴</button>
<button data-name="Italic">斜体</button>
<button data-name="indent">加缩进</button>
<button data-name="underline">下划线</button>
</div>
<script>
//    设置该区域可编辑
    document.getElementById("edit").contentEditable = true;

//    操作该区域
    var buttonNumber = document.getElementsByTagName("button").length;
    var buttons = document.getElementsByTagName("button");
    for(var i=0;i<buttonNumber;i++){
        buttons[i].onclick = function () {
            document.execCommand(this.getAttribute("data-name"));
        }
    }
</script>
</body>
</html>